<template>

	<view class="page-body">
		<view class="page-section page-section-gap">
			<baidu-map :scroll-wheel-zoom="true" :center="point" :zoom="zoom" @ready="mapReady" class="bm-view">
				<bm-view class="map" style="width: 100%; height:100%; flex: 1"></bm-view>
				<!-- 自定义控件 -->
				<bm-control :offset="{width: '50px', height: '10px'}">
					<!-- 自动填充 -->
					<bm-auto-complete :sugStyle="{zIndex: 999999}">
						<uni-card>

							<input v-model="searchKey" placeholder="输入关键字进行模糊查询" @input="mapSearch">
							</input>
						</uni-card>
						<!-- <button @click="mapSearch">搜索</button> -->
					</bm-auto-complete>
			
				</bm-control>
				<bm-control anchor="BMAP_ANCHOR_BOTTOM_LEFT">
					<uni-card>
						<view class="" style="text-align: center;font-size: 14px;">
							<span>{{address}}</span>

						</view>
						<view class="" style="text-align: center;font-size: 16px;font-weight: 600;">
							<span>{{riskLevel}}</span>
						</view>
						<button type="primary" size="small" @click="confirm">确认接入点</button>
					</uni-card>
				</bm-control>

				<!-- 手动放大缩小到省市街道 位置：右下方-->
				<bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" />
			</baidu-map>
		</view>
	</view>


</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				//地图中心点
				point: {
					lng: 122.162964,
					lat: 30.064204
				},
				// this.center.lng = 122.162964; 
				// this.center.lat = 30.064204;
				//zoom层级
				zoom: 13,
				//搜索关键字
				searchKey: "",
				inputRadius: "",
				riskLevel: "",
				address: "",
				model: {}
			}
		},

		methods: {
			//初始化地图
			handler({
				BMap,
				map
			}) {
				let that = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					geocodeAccuracy: 'highAccuracy', // 设置高精度模式
					isHighAccuracy: true,
					success: function(res) {
						if (res) {
							that.point.lng = res.longitude
							that.point.lat = res.latitude
							// that.markerPoint.lng = res.longitude
							// that.markerPoint.lat = res.latitude

							console.log('当前位置的经度：' + that.point.lng);
							console.log('当前位置的纬度：' + that.point.lat);
							// that.zoom = 13
							that.zoom = 13
						}
					}
				});
			},
			//	初始化地图
			mapReady({
				BMap,
				map
			}) {
				this.BMap = BMap;
				this.map = map;

				// let geocoder = new BMap.Geocoder(); //创建地址解析器的实例
				if (this.model.hasOwnProperty('address')) { //如果当前model中包含address 则证明是修改弹框里面的地址数据（地址存在，打开弹框显示地址标点）
					this.keyword = this.model.address
					this.inputValue = this.model.address
				} else { //否则显示默认标点（这里的经纬度代表成都）
					//第二个参数  10 代表地图缩 放级别,最大为19,最小为0

					setTimeout(() => {
						this.map.centerAndZoom(this.point, 15);
						//增加标记
						addMarker(this.point, 0);
					
					}, 1000);
					this.keyword = ''
					this.inputValue = ''
				}

				map.enableScrollWheelZoom(true);
				let that = this;
				map.addEventListener('click', function(e) {
					that.point = e.point;
					that.riskLevel = ""
					addOverLay(0);
				});

				function addOverLay(val) {
					// $("#risk-level").html("");
					//清除覆盖物
					map.clearOverlays();
					//增加标记
					addMarker(that.point, val);

				}

				// 添加标注
				function addMarker(point, val) {
					let marker = new BMap.Marker(point);
					map.addOverlay(marker);
					var myGeo = new BMap.Geocoder({
						extensions_town: true
					});
					if (val == 0) {
						myGeo.getLocation(point, function(result) {
							if (result) {
								console.log("点击地图",result);
								that.center = result.point
								that.address = result.address
								// console.log(result);
								// document.getElementById('address').innerHTML = result.address;
							}
						});
					}
					// console.log(marker);
					return marker;
				}
				

			},
			
			//确认地点
			confirm(){
				this.$emit("transferPoint", this.point)
			},
			//关键字搜搜哦
			mapSearch() {
				//创建圆
				var colour = "blue";
				// 给予不同风险等级对应的颜色

				//创建地址解析器实例
				var myGeo = new BMap.Geocoder();
				// 将地址解析结果显示在地图上，并调整地图视野
				myGeo.getPoint(this.searchKey, (point) => {
					if (point) {
						this.map.clearOverlays() // 清空地图上的覆盖物
						this.map.centerAndZoom(point, 15)
						this.map.addOverlay(new BMap.Marker(point)) //重新绘制当前位置覆盖物-marker点
						this.map.addOverlay(new BMap.Circle(point, parseInt(this.radius * 100), {

							strokeColor: colour,
							strokeWeight: 1,
							strokeOpacity: 1,
							fillOpacity: 0.33,
							fillColor: colour
						}))
						myGeo.getLocation(point, (rs) => {
							console.log('当前位置详细信息---', rs)
							this.address = rs.address
						})
						this.point = point

					} else {
						// alert('您选择的地址没有解析到结果！');

					}
				}, this.searchKey)

			},
		}
	}
</script>
<style lang="scss" scoped>
.page-body{
	.page-section{
		.bm-view{
			height: 85vh;
			width: 100vw;
		}
	}
}

</style>